<template>
    <div class="container">
        <BookItem 
          v-for="(book, index) in books" 
          :book="book"
          :index="index"
          @delete-book-item="deleteBook"
          ></BookItem>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import BookItem from './components/BookItem.vue';

const books = ref([]);

onMounted(() => {
    axios.get('/api/book_data.json')
    .then((res) => {
        books.value = res.data;
    })
})

function deleteBook(index) {
    books.value.splice(index, 1);
}
</script>

<style>
.container {
    display: flex;
    flex-wrap: wrap;
}
</style>